<template>
  <div class="father">
    <div class="back" @click="push">
      <img src="@/assets/img/返回.png" alt="" />
      <span>批改作业</span>
    </div>
    <div class="son01">
      <h3 style="font-size: 20px">
        学生姓名：<span style="color: crimson">{{
          taskManager.studentName
        }}</span>
      </h3>
      <div style="margin-top: 30px">
        <div class="biaoti">
          作业题目：
          <div v-html="taskManager.taskName" class="taskName"></div>
        </div>
        <div class="daan">
          作业答案：
          <div v-html="taskManager.taskTxt"></div>
        </div>
      </div>
      <div>
        <el-form
          :model="pingyu"
          ref="numberValidateFormRef"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item
            label="评分："
            prop="score"
            :rules="[
              { required: true, message: '评分不能为空' },
              { validator: validateScore, trigger: 'blur' },
            ]"
          >
            <el-input
              v-model="pingyu.score"
              autocomplete="off"
              placeholder="请输入评分"
            ></el-input>
          </el-form-item>
          <el-form-item label="评语：">
            <el-input
              v-model="pingyu.comment"
              placeholder="请输入评语"
              type="textarea"
              :rows="4"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <el-button class="submit-btn" type="primary" @click="handleSubmit"
        >提交</el-button
      >
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
// 引入路由
import { useRouter, useRoute } from "vue-router";
import {
  selecttaskManagerByid,
  updatetaskManager,
} from "@/api/teacher/taskManager.js";
import { ElForm, ElFormItem, ElInput, ElButton, ElMessage } from "element-plus";
// 创建路由实例
const router = useRouter();
// 获取当前路由对象
const route = useRoute();
//返回上一页
const push = () => {
  router.push("/class/homework");
};
//查询的信息对象
const taskManager = ref({});
const selectOne = (id) => {
  selecttaskManagerByid(id).then((res) => {
    taskManager.value = res.data;
    pingyu.value.score = res.data.score;
    pingyu.value.comment = res.data.comment;
  });
};
selectOne(route.query.id);
//==================================
//返回后端的数据
const pingyu = ref({});
//表单校验
const numberValidateFormRef = ref(null);
//自定义表单校验规则
const validateScore = (rule, value, callback) => {
  if (!value) {
    return callback(new Error("评分不能为空"));
  }
  if (!/^\d+(\.\d+)?$/.test(value)) {
    return callback(new Error("评分必须为数字或小数"));
  }
  callback();
};

//提交评语
const handleSubmit = () => {
  numberValidateFormRef.value.validate((valid) => {
    if (valid) {
      // 提交数据到后端的逻辑
      pingyu.value.id = route.query.id;
      updatetaskManager(pingyu.value).then((res) => {
        if (res.code == 200) {
          ElMessage.success("提交成功");
          router.push("/class/homework");
        } else {
          ElMessage.error("网络异常，请刷新重试");
        }
      });
    } else {
      ElMessage.error("验证失败,请检查输入信息");
      return false;
    }
  });
};
</script>

<style lang="scss">
$fz-base: 16px;
$fz-title: 20px;
$fz-small: 14px;
$color-primary: #000;
$color-secondary: #606266;
$color-background: #ffffff;
$color-border: #dcdfe6;

.father {
  margin: 0 auto;
  width: 100%;
  height: 100%;
  background-color: $color-background;
  padding: 20px;
}

.son01 {
  margin: 0 auto;
  width: 95%;
  background-color: $color-background;
  margin-top: 50px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

.back {
  width: fit-content;
  height: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }

  span {
    font-size: $fz-title;
    color: $color-primary;
  }
}

.biaoti,
.daan {
  border: 1px solid $color-border;
  margin-top: 20px;
  font-size: $fz-base;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
.biaoti img {
  max-width: 100%;
  height: auto;
  cursor: pointer;
}
.daan img {
  max-width: 100%;
  height: auto;
  cursor: pointer;
}

.taskName p {
  margin: 16px 0;
  line-height: 28px;
}

.daan p {
  margin: 16px 0;
  line-height: 28px;
}

.el-form-item {
  margin-bottom: 20px;
}

.el-input {
  margin-top: 10px;
}

.submit-btn {
  width: 100px;
  height: 35px;
  margin-top: 40px;
  background-color: rgb(255, 107, 15);
  color: $color-background;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: $fz-base;
  margin-left: 50px;
  &:hover {
    background-color: darken($color-primary, 10%);
  }
}
</style>
